<template>
    <div>
        <div style="padding: 10px;" class="test">
            <!--            分页栏-->
            <div style="margin: 10px 0;">

                <el-form label-width="80px" size="small" style="margin:0 40px;" :rules="rules" :model="form">
                    <el-form-item label="ID" style="display: none">
                        <el-input v-model="form.id" autocomplete="off" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="题目类型" style="display: none">
                        <el-input v-model="form.id" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="出题老师" v-if="user.role == 'ROLE_ADMIN'">
                        <el-select clearable filterable v-model="form.teacherId" placeholder="请选择">
                            <el-option v-for="item in teacher" :key="item.teacherId" :label="item.teacherName"
                                       :value="item.teacherId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="课程名称">
                        <el-select clearable filterable v-model="form.courseId" placeholder="请选择">
                            <el-option v-for="item in course" :key="item.courseId" :label="item.courseName"
                                       :value="item.courseId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="题干">
                        <el-input v-model="form.questionTitle" autocomplete="off"
                                  @focus="focus('questionTitle',form.questionTitle)"></el-input>
                    </el-form-item>
                    <label>选项：</label>
                    <el-form-item label="A">
                        <el-input v-model="form.optionA" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="B">
                        <el-input v-model="form.optionB" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="C">
                        <el-input v-model="form.optionC" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="D">
                        <el-input v-model="form.optionD" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="正确答案" v-model="form.correctAnswer">
                        <el-checkbox-group v-model="correct" @change="changeHandle">
                            <el-checkbox label="A"></el-checkbox>
                            <el-checkbox label="B"></el-checkbox>
                            <el-checkbox label="C"></el-checkbox>
                            <el-checkbox label="D"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>

                    <el-form-item label="分数">
                        <el-input-number v-model="form.score" :precision="1" :step="0.5" :min="1"
                                         :max="20"></el-input-number>
                    </el-form-item>
                    <el-form-item label="解析">
                        <el-input v-model="form.parse" autocomplete="off" @focus="focus('parse')"></el-input>
                    </el-form-item>

                    <el-form-item label="难度">
                        <el-rate
                                v-model="form.difficult"
                                :texts="texts"
                                show-text
                                style="display: inline"
                        >
                        </el-rate>
<!--                        <label style="float: right;margin-right: 50%">使用状态:-->
<!--                            <el-switch-->
<!--                                    v-model="form.useStatus"-->
<!--                                    active-color="#13ce66"-->
<!--                                    inactive-color="#ff4949"-->
<!--                                    active-value="1"-->
<!--                                    inactive-value="0"-->
<!--                            >-->
<!--                            </el-switch>-->
<!--                        </label>-->
                    </el-form-item>
                    <el-form-item label="知识点">
                        <el-input v-model="form.knowledge"  placeholder="请输入知识点，多知识点与‘，’分隔"></el-input>
                    </el-form-item>

            </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button size="median" type="primary" @click="save">确 定</el-button>
                <el-button size="median" @click="form = {}">重 置</el-button>
                </div>
                </div>
                <el-dialog :visible.sync="dialogVisible" width="50%">
                    <div>
                    <vue-editor v-model="content" :editor-toolbar="customToolbar"/>
                    </div>
                    <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="editorSave">确 定</el-button>
                <el-button @click="dialogVisible = false">取 消</el-button>
                </div>
                </el-dialog>

                </div>
                </div>
                </template>

                <script>

                import request from "../utils/request";
                import {serverIp} from "../../public/config";

                export default {
                    name: 'Checkbox',
                    components: {},
                    data() {
                        return {
                            form: {useStatus:"1",difficult:3,score:1},
                            roles: {},
                            user:{},
                            serverIp: serverIp,
                            dialogVisible: false,
                            search: '',
                            pageSize: 5,
                            pageNum: 1,
                            total: 20,
                            tableData: [],
                            teacher: [],
                            course: [],
                            content: '',
                            formType: '',
                            correct: [],
                            correctAnswer: [{value: "A"}, {value: "B"}, {value: "C"}, {value: "D"}],
                            texts: ['很简单', '简单', '一般', '难', '很难'],
                            rules: {
                                adminId: [
                                    {required: true, message: '请输入用戶ID', trigger: 'blur'},
                                    {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                                ]
                            },
                            customToolbar: [
                                ["bold", "italic", "underline"],
                                [{list: "ordered"}, {list: "bullet"}],
                                ["image", "code-block"]
                            ]

                        }
                    },
                    created() {
                        this.getUser();
                        this.getTeacher();
                        this.getCourse();
                        if (this.$route.params.form) {
                            console.log(this.$route.fullPath)
                            this.form = this.$route.params.form;
                            this.correct = JSON.parse(this.form['correctAnswer']);
                        }

                    },
                    methods: {
                        getUser() {
                            this.user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
                            if (!this.user) {
                                this.$message.info("获取用户失败，请重新登录")
                            }
                        },
                        save() {

                            //处理教师id
                            if(this.user.role == "ROLE_TEACHER"){
                                this.form['teacherId'] = this.user.userId;
                            }

                            this.form['questionType'] = 2;
                            this.form['createTime'] = new Date(); //设置时间
                            console.log("form:", this.form);
                            if (this.form.id) { // 更新
                                request.post('/question/save', this.form).then(res => {
                                    console.log("code:", res.code)
                                    if (res.code == '200') {
                                        this.$message.success("保存成功")
                                    } else {
                                        this.$message.error("保存失败")
                                    }
                                }).catch((err) => {
                                    this.$message.error(err);
                                })
                            } else { //新增
                                request.post("/question/save", this.form).then(res => {
                                    console.log(res.data)
                                    if (res.code == '200') {
                                        this.$message.success("添加成功")
                                    } else {
                                        this.$message.error("添加失败")
                                    }
                                }).catch((err) => {
                                    this.$message.error("添加失败");
                                    this.$message.error(err);
                                })
                            }
                        },
                        getTeacher() {
                            //请求教师信息数据
                            request.get("/teacher/findAll").then(res => {
                                console.log("res:", res);
                                this.teacher = res.data
                            })
                        },
                        getCourse() {
                            //请求课程信息数据
                            if (this.user.role == "ROLE_TEACHER") {
                                var params = {
                                    teacherId:this.user.userId
                                }
                            }else{
                                var params = {
                                    teacherId:""
                                }
                            }
                            request.get("/course/findAll", {
                                params: params
                            }).then(res => {
                                console.log("res:", res);
                                this.course = res.data
                            })
                        },
                        focus(formType, formValue) {
                            this.formType = formType
                            this.content = formValue;
                this.dialogVisible = true;
            },
            editorSave() {
                this.$message.info(this.content);
                this.form[this.formType] = this.content;
                this.content = '';
                this.dialogVisible = false;
            },
            changeHandle() {
                this.form['correctAnswer'] = JSON.stringify(this.correct.sort());
            }


        },

    }
</script>



